<template>
  <template v-if="getShow">
    <LoginFormTitle class="enter-x" />
    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
      <FormItem name="mobile" class="enter-x">
        <Input
          size="large"
          v-model:value="formData.mobile"
          :placeholder="t('sys.login.mobile')"
          class="fix-auto-fill"
        />
      </FormItem>
      <FormItem name="sms" class="enter-x">
        <div class="getCode_box">
          <Input
            size="large"
            v-model:value="formData.sms"
            placeholder="验证码"
            class="fix-auto-fill"
          />
          <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loadingCode">
            {{ getButtonText }}
          </Button>
        </div>
      </FormItem>

      <FormItem class="enter-x">
        <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
          {{ t('sys.login.loginButton') }}
        </Button>
        <Button size="large" block class="mt-4" @click="handleBackLogin">
          {{ t('sys.login.backSignIn') }}
        </Button>
      </FormItem>
    </Form>
  </template>
</template>
<script lang="ts" setup>
  import { reactive, ref, computed, unref, watchEffect } from 'vue';
  import { Form, Input, Button } from 'ant-design-vue';
  import LoginFormTitle from './LoginFormTitle.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
  import { useCountdown } from '/@/components/CountDown/src/useCountdown';
  import { isFunction } from '/@/utils/is';
  import { getPermCode } from '/@/api/sys/user';

  const FormItem = Form.Item;
  const { t } = useI18n();
  const { handleBackLogin, getLoginState } = useLoginState();
  const { getFormRules } = useFormRules();

  const formRef = ref();
  const loading = ref(false);

  const formData = reactive({
    mobile: '',
    sms: '',
  });

  const { validForm } = useFormValid(formRef);

  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);

  async function handleLogin() {
    const data = await validForm();
    if (!data) return;
    console.log(data);
  }

  const loadingCode = ref(false);
  const { currentCount, isStart, start } = useCountdown(60);
  const getButtonText = computed(() => {
    return !unref(isStart)
      ? t('component.countdown.normalText')
      : t('component.countdown.sendText', [unref(currentCount)]);
  });

  watchEffect(() => {
    //props.value === undefined && reset();
  });
  function validatePhoneNumber(phoneNumber) {
    // 检查是否为空
    if (!phoneNumber) {
      return false;
    }

    // 检查格式是否正确（举例：11位数字的简单验证方式）
    const phoneRegex = /^[0-9]{11}$/;
    if (!phoneRegex.test(phoneNumber)) {
      return false;
    }

    return true;
  }

  function handleStart() {
    getPermCode({
      mobile: '15737905926',
    }).then((res) => {
      console.log(res);
    });
    validatePhoneNumber(formData.mobile);
    loadingCode.value = true;
    start();
  }
</script>

<style lang="less" scoped>
  .getCode_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    button {
      margin-left: 20px;
      height: 40px;
    }
  }
</style>
